<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width">
    <title>Annie2x - 教学示例 </title>
    <script>
        window.domain="http://annie2x.com/newTeachWeb/res/";
    </script>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
    <!-- Set render engine for 360 browser -->
    <meta name="renderer" content="webkit"/> <!-- No Baidu Siteapp-->
    <meta http-equiv="Cache-Control" content="no-siteapp"/> <!-- HTML5 shim for IE8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script> <![endif]-->
    <link rel="icon" href="./favicon.ico">
    <!-- change to bootstrap3 -->
    <link href="cn/statics/simpleboot/bootstrap3/css/bootstrap.min.css?v=20160229" rel="stylesheet"/>
    <link href="css/nav.css"  rel="stylesheet">
    <!-- change theme to bootstrap3 -->
    <link href="cn/statics/simpleboot/themes_bootstrap3/cmf/theme.min.css?v=20160812" rel="stylesheet" id="g-css-theme"/>
    <link href="cn/statics/simpleboot/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" type="text/css"/>
    <link href="cn/tpl/simplebootx/Public/css/style.css?v=20160823" rel="stylesheet"/>
    <link href="cn/tpl/simplebootx/Public/css/header.css?v=20160830" rel="stylesheet"/>
    <script src="js/annieCore.min.js"></script>
    <style>
        .Conversion {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -24px -24px;*/
        }

        .DB {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -48px -48px;*/
        }

        .Engine2D {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -48px -24px;*/
        }

        .Engine3D {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -48px -0px;*/
        }

        .extension {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 23px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -24px -72px;*/
        }

        .Feather {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -24px -48px;*/
        }

        .Inspector {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -48px -72px;*/
        }

        .Lakeshore {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -24px -0px;*/
        }

        .Merger {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -0px -72px;*/
        }

        .platform {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -0px -48px;*/
        }

        .Depot {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -0px -24px;*/
        }

        .Wing {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/product_sprites.png") no-repeat -0px -0px;*/
        }

        .Native {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 25px;
            height: 25px;
            background: url("https://cdn.www.egret.com/official/new-egret/img/product-icon-native-25.jpg");
        }

        .closeButton {
            width: 24px;
            height: 24px;
            /*background: url("cn/statics/images/icon/closebutton.png") no-repeat -0px -0px;*/
            background-size: cover;
        }

        .microclient {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 25px;
            height: 25px;
            background: url("http://cdn.dev.egret.com/simpleboot/public/microclient.jpg");
        }

        .matchvs {
            position: absolute;
            top: 13px;
            left: 25px;
            width: 25px;
            height: 25px;
            background: url("http://cdn.dev.egret.com/simpleboot/public/matchvs.png");
        }
    </style>
    <link rel="stylesheet" type="text/css" data-name="vs/editor/editor.main"
          href="cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/vs/editor/editor.main.css">
    <link href="cn/tpl/simplebootx/Public/simpleboot/examples/css/egret3d.css" rel="stylesheet" type="text/css"/>
    <style>
        #treelist li > span.easytree-exp-c > .easytree-expander,
        #treelist li > span.easytree-exp-cl > .easytree-expander {
            background-image: url("cn/statics/images/icon/arrow-down.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        #treelist li > span.easytree-exp-e > .easytree-expander {
            background-image: url("cn/statics/images/icon/arrow-up.png");
            background-position: center;
            background-size: cover;
            background-repeat: no-repeat;
        }

        .btn-blue {
            font-size: 14px;
            line-height: 25px;
            border: 1px solid #d1d1d1;
            padding: 0 30px 0 30px;
            border-radius: 15px;
            background-color: #079bf6;
            color: #fff;
            cursor: pointer;
            display: inline-block;
        }

        .demo-info-2d {
            padding: 30px 0 10px 30px;
        }

        .btn-qrcode {
            margin-top: 0px;
        }

        #playground-result {
            display: none;
        }

        #playground-result {
            background-image: url(image/phone16.png);
            background-position: center;
            background-repeat: no-repeat;
            background-origin: border-box;
            background-size: contain;
            /* background-clip: content-box; */
        }

        #popiframe {
            border: 0;
            outline: 0;
            position: relative;
            z-index: 10;
        }

        .coderesult {
            position: relative;
        }

        .coderesult .qrpopmodule {
            position: absolute;
            top: 0;
            background-color: rgba(0, 0, 0, 0.5);
            display: none;
            z-index: 12;
        }

        #qrcode{
            /*background: rgb(255, 255, 255);*/
            /*height: 27%;*/
            /*width: 51%;*/
            /*margin-top: 55%;*/
        }

        #qrcode img {
            margin: 50% auto;
            /*padding-top: 14%;*/
        }

        .poptitle {
            /*display: none; */
            position: absolute;
            padding: 0 0;
            margin: 0 0;
            text-align: center;
            color: #fff;
            z-index: 11;
        }

        #execute {
            margin: 0 4px;
        }

        .easytree-active {
            color: #079bf6;
        }

        /**
        * left z-index: iframe 10 title 11 qrcode 12
        */
        #js-fullscreen{
            height: 100%;
        }
    </style>
</head>
<body class="playground" >
<nav class="navbar navbar-inverse navbar-fixed-top site-navbar" style="display: none">
    <div class="container">
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
            </button>
            <a class="navbar-brand" style="font-size:24px;" href="./">Annie2x</a>
        </div>
        <div id="navbar" class="collapse navbar-collapse">
            <ul class="nav navbar-nav">
                <li style="font-size:18px;" class="nav-item" ><a href="http://annie2x.com/">首页</a></li>
                <li style="font-size:18px;" class="nav-item"><a href="http://annie2x.com/demo/">精彩案例</a></li>
                <li style="font-size:18px;" class="nav-item"><a href="http://ask.annie2x.com/">问答社区</a></li>
                <li style="font-size:18px;" class="nav-item">
                    <!--<a href="http://api.annie2x.com" target="_blank"></a>-->
                    <a href="http://api.annie2x.com/api2x/">
                        API文档
                    </a>
                </li>
                <li style="font-size:18px;" class="nav-item"><a href="https://pan.baidu.com/s/1ZgwztgpATI1FZGuz8oYpDA">入门教程</a></li>
                <li style="font-size:18px;" class="active nav-item">
                    <a>示例演示</a>
                </li>
                <li style="font-size:18px;" class="nav-item"><a href="http://tool.annie2x.com/login/">授权中心</a></li>
            </ul>
        </div>
        <!--/.nav-collapse -->
    </div>
</nav>
<div style='margin:0 auto;width:0px;height:0px;overflow:hidden;display: none'><img
        src="http://cdn.dev.egret.com/simpleboot/example/edn5120.png" width='700'></div>
<div id="modal-content"></div>
<div id="js-fullscreen">
    <div class="left-bar" style="height: 88%">
<!--        <div class="search-item"><input type="text" placeholder="输入关键字" id="search"></div>-->
        <!-- <div style="text-align: center;margin-bottom:10px;"> <a href="cn/example/egret2d/index.html">2D</a> / <a href="cn/example/egret3d/index.html">3D</a> </div> -->
        <div id="treelist" style="display: none;padding-left: 0">
        </div>
        <div id="searchResult"></div>
    </div>
    <div id="playground-host" class="col-sm-8">
        <div class="demo-info-2d">
            <span id="exampleTitle"></span>
            <span class="btn-blue pull-right" id="video" style="display: none">视频教程</span>
            <span class="btn-blue pull-right" id="down">源码下载</span>
            <span class="btn-blue pull-right" id="execute">运行</span>
            <span class="btn-blue pull-right" id="reset">重置</span></div>

        <div id="wrapper">
            <div id="typescriptEditor" style=" margin-top: 26px ;border: 1px solid #e1e1e1;" data-keybinding-context="1"
                 data-mode-id="typescript"></div>
            <button id="screen" class="btn-success" style="display:none;">||</button>
        </div>
        <div class="classmenu" style="display:none;"> <!--<spna id="exampleTitle">最基本的显示</spna>-->
            <a id="exampleDes" title="示例介绍" href="#">
                <img src="http://cdn.dev.egret.com/simpleboot/example/des.png"/></a></div>
        <button id="execute" class="btn btn-success" style="position: absolute;top: 0px;right: 212px;display:none;">运行</button>
        <button id="reset" class="btn btn-success" style="position: absolute;top: 0px;right: 105px;display:none;">重置</button>
        <!--<button id="down" class="btn btn-success" style="position: absolute;top: 0px;right: 0px;display:none;">下载</button>-->
    </div>
    <div class="col-sm-4">
        <div style="text-align: center;" class="demo-info-2d">
            <a class="btn-qrcode" id="erweima" style="background-image:url(http://cdn.dev.egret.com//simpleboot/example/qr.svg);">二维码</a>
            <p>扫描二维码显示效果为初始状态，不会显示改变后的效果</p>
        </div>
        <div id="playground-result">
            <div class="coderesult">
                <iframe id="popiframe" allowfullscreen="true" src=""></iframe>
                <div class="qrpopmodule">
                    <div id="qrcode" class="center-block">
                        <div style="width: 50%;height: 50%"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div style="clear:both;"></div>
</div>
<script type="text/javascript">
    //全局变量
    var GV = {
        DIMAUB: "cn/",
        JS_ROOT: "statics/js/",
        TOKEN: ""
    };
</script> <!-- Le javascript
    ================================================== -->
<!-- Placed at the end of the document so the pages load faster --> <!-- change to bootstrap3 -->
<script src="cn/statics/js/jquery.min.js"></script>
<script src="cn/statics/js/jquery-migrate.min.js"></script>
<!--<script src="cn/statics/js/wind.min.js"></script> &lt;!&ndash; change to  bootstrap3 &ndash;&gt;-->
<!--<script src="cn/statics/simpleboot/bootstrap3/js/bootstrap.min.js"></script>-->
<script src="cn/statics/js/frontend.min.js?v=20160229"></script>
<script>
    (function () {
        $("#menu-item-5").removeClass("productBox");
        $("#menu-item-5").removeClass("dropdown");
        $("#menu-item-5").addClass("expBox");
        $("#menu-item-5").addClass("dropdown");
    })();
</script>
<!--<script src="cn/tpl/simplebootx/Public/js/nav.min.js?v=20160823"></script>-->
<script>
    $(function () {
        $('body').on('touchstart.dropdown', '.dropdown-menu', function (e) {
            e.stopPropagation();
        });

        (function ($) {
            $.fn.totop = function (opt) {
                var scrolling = false;
                return this.each(function () {
                    var $this = $(this);
                    $(window).scroll(function () {
                        if (!scrolling) {
                            var sd = $(window).scrollTop();
                            if (sd > 100) {
                                $this.fadeIn();
                            } else {
                                $this.fadeOut();
                            }
                        }
                    });

                    $this.click(function () {
                        scrolling = true;
                        $('html, body').animate({
                            scrollTop: 0
                        }, 500, function () {
                            scrolling = false;
                            $this.fadeOut();
                        });
                    });
                });
            };
        })(jQuery);

        $("#backtotop").totop();
    });

    function setNavLogo() {
        if (document.body.clientWidth > 1270) {
            $("#navlogo").attr("src", "cn/tpl/simplebootx/Public/images/logo.png");
        } else {
            $("#navlogo").attr("src", "cn/tpl/simplebootx/Public/images/logo.png");
        }
    }

    function getLoginInfo() {
        // $.post("cn/user/index/is_login.json", {}, function (data) {
        //     if (data.status == 1) {
        //
        //         $("#edn_user_synlogin").attr("src", "cn/user/login/edn_user_synlogin");
        //         $("#main-menu-user-headicon").attr("src", "http://bbs.egret.com/uc_server/avatar.php?uid=" + data.user.avatar + "&size=middle");
        //         $("#main-menu-user-nicename").text(data.user.user_nicename != "" ? data.user.user_nicename : data.user.user_login);
        //         if (data.user.user_type == 1)
        //             $("#menu-user-info .subnav-login-out").prepend("<li class='logintOutBox'><a href=\"cn/admin/index\"><i class='fa fa-user'></i> &nbsp;后台管理</a></li>");
        //         $("#menu-user-login").hide();
        //         $("#menu-user-info").show();
        //
        //     }
        //     if (data.status == 0) {
        //         $("#menu-user-info").hide();
        //         $("#menu-user-login").show();
        //     }
        //
        // });
    }

    function checkLogin() {
        if ($("#main-menu-user-nicename").text() != "") {
            return true;
        }
        return false;
    }

    $(window).resize(function () {
        setNavLogo()
    });

    $(window).ready(function () {
        getLoginInfo();

    });

    ;(function () {
        "use strict";
        //var index=window.location.href.indexOf("cn/");
        //var mode=window.location.href.substr(index);
        //$("#main-menu").find("[href='"+mode+"']").attr("style","color:#FFFFFF");
        if (window.location.href.indexOf("cn/page/index/id/8") > 0) {
            $("#menu-item-2 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("book") > 0) {
            $("#menu-item-19 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("docs") > 0) {
            $("#menu-item-3 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("apidoc") > 0) {
            $("#menu-item-4 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("video") > 0) {
            $("#menu-item-6 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("cn/page/index/id/54") > 0) {
            $("#menu-item-8 a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("example") > 0) {
            $("#menu-item-5>a").attr("style", "color:#1dafec");
        }
        else if (window.location.href.indexOf("activity") > 0 || window.location.href.indexOf("Activity") > 0) {
            $("#menu-item-8 a").attr("style", "color:#1dafec");
        }
        if (window.location.href.indexOf("github") > 0) {
            $("#menu-item-22 a").attr("style", "color:#1dafec");
        }

    })();

    setNavLogo();

</script>
<script>
    var _hmt = _hmt || [];
    (function () {
        var hm = document.createElement("script");
        hm.src = "//hm.baidu.com/hm.js?e37d06fa1de56304c9d645100ad450ac";
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(hm, s);
    })();
</script> <!-- Placed at the end of the document so the pages load faster -->
<script>
    var startTime = (new Date()).getTime();
    var selectNode = null;
    var exampleList = null;
    var examplePath = "source/src/";
    var viewUrl = "source/";
</script>
<script type="text/javascript">
    var require = {
        baseUrl: 'cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/'
    };
</script>
<script type="text/javascript">
    if(window.location.href.indexOf("#")==-1){
        window.location.href+="#traceDemo";
    }
    $(function () {
        $.ajax({
            // timeout: 4000, //超时时间设置，单位毫秒
            type: "GET",
            url: "annie2xAPIObj.json",
            // url: "./payLogin.json",
            dataType: 'json',//返回的数据格式
            success: function (result) { //请求成功的回调函数
                $("#treelist").html(JSON.stringify(result));
                var script=document.createElement("script");
                script.type="text/javascript";
                script.src="js/typescript.js";
                $("body").append(script)
            },
            error: function (result) {

            }
        });
    })

</script>
<script src="//cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript"
        src="cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/egret/js/popwin.js"></script>
<script type="text/javascript" src="cn/tpl/simplebootx/Public/js/qrcode.min.js"></script>
<script type="text/javascript" src="cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/vs/loader.js"></script>
<script type="text/javascript"
        src="cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/vs/editor/editor.main.nls.js"></script>
<script type="text/javascript"
        src="cn/tpl/simplebootx/Public/simpleboot/examples/vscode/Script/vs/editor/editor.main.js?v=20160601"></script>
<script type="text/javascript" src="cn/statics/js/easytree/jquery-ts.easytree.js"></script>
<script src="cn/statics/js/easytree/extends/searchtree.js"></script>
<!--<script type="text/javascript" src="js/typescript.js"></script>-->
</body>
</html>